<template>
    <div class='manage-container'>
        <div class="mc-container">
            <div class="product-manageTip">
                <span>商品管理</span>
            </div>
            <div>
                <el-checkbox class="all-in" :isIndeterminate="isIndeterminate" v-model="checkAll"
                    @change="handleCheckAllChange">全选</el-checkbox>
            </div>
            <div>
                <el-checkbox-group v-model="checkedProduct" @change="handleCheckedCitiesChange">
                    <div class="mc-pm-box" v-for="product in productList">

                        <div class="pre-container">
                            <!-- 选中框 -->
                            <div class="check-item">
                                <el-checkbox class="c-i-item" :key="product.spuId" :label="product.spuId">
                                    {{ product.spuTitle }}</el-checkbox>
                            </div>

                            <!-- 商品图片 -->
                            <div class="product-img">
                                <img :src="product.spuImage" alt="">
                            </div>

                            <!-- 商品描述 -->
                            <div class="product-detail mid-container">
                                <span :title="product.spuDetail.replaceAll('<br>', '\n')" v-html="product.spuDetail"></span>
                            </div>

                            <!-- 价格显示 -->
                            <div class="price-container">
                                <span :title="product.spuPrice + '元人名币'">{{ product.spuPrice }}￥</span>
                            </div>

                            <!-- 尾部 -->
                            <div class="tail-container">
                                <div>上下架状态 :
                                    <span style="color: #ff4000; font-weight: 800;">
                                        {{ checkProductStatus(product.publishStatus, product.sellStatus) }}
                                    </span>
                                </div>

                                <ul>
                                    <li>
                                        <span @click="updateProduct(product.spuId, product.sellStatus)">修改</span>
                                    </li>
                                    |
                                    <li>
                                        <span @click="deleteProduct(product.spuId)">删除</span>
                                    </li>
                                    |
                                    <li>
                                        <span @click="grounding(product.spuId, product.sellStatus)">上架</span>
                                    </li>
                                    |
                                    <li>
                                        <span @click="undercarriage(product.spuId, product.sellStatus)">下架</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </el-checkbox-group>
            </div>
            <div v-if="productList.length == 0">
                <el-empty :image-size="400" description="暂未发布商品~"></el-empty>
            </div>
        </div>
    </div>
</template>
<script>
// 导入组件
const productOptions = [];
// 导出模块
export default {
    // 模块名字
    name: 'manageproduct',
    // 模块数据
    data() {
        //数据  
        return {
            checkAll: false,   // 是否选中全部
            checkedProduct: [],    // 默认选中的，选中的
            products: productOptions,    // 
            isIndeterminate: false,  // 控制全部选中的样式

            productList: [],   // 所有商品的列表
            memberVo: [],   // 本地用户数据
            spuInfoVo: {    // 提交数据
                id: '',
            }
        };
    },
    // 注册组件
    components: {
    },
    methods: {

        /**
         * 修改商品
         * @param {*} spuId 
         */
        updateProduct(spuId, sellStatus) {
            if (!sellStatus) {
                this.$router.push({
                    path: '/member/membersetting/updateproduct',
                    query: {
                        spuId: spuId,
                    }
                })
            } else {
                this.$message({
                    type: 'success',
                    message: '商品已经售罄'
                })
            }
        },

        /**
         * 删除商品---一律伪删除
         * @param {*} spuId 
         */
        deleteProduct(spuId) {
            this.$http({
                url: this.$http.adornUrl(`/shitou-product/shitouproduct/spuinfo/logicDeleteProduct?spuId=${spuId}&memberId=${this.memberVo.id}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除商品'
                    })
                    this.getAllProduct()
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })

        },

        /**
         * 上架商品
         * @param {*} spuId 
         */
        grounding(spuId, sellStatus) {
            if (!sellStatus) {
                this.$http({
                    url: this.$http.adornUrl("/shitou-product/shitouproduct/spuinfo/updatePublishStatus"),
                    method: 'post',
                    data: this.$http.adornData({id: this.memberVo.id, spuId: spuId, publishStatus: 1 })
                }).then(({ data }) => {
                    if (data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '上架成功'
                        })
                        this.getAllProduct()
                    }
                })
            } else {
                this.$message({
                    type: 'success',
                    message: '商品已经售罄'
                })
            }
        },

        /**
         * 下架商品
         * @param {*} spuId spu商品id
         */
        undercarriage(spuId, sellStatus) {
            if (!sellStatus) {
                this.$http({
                    url: this.$http.adornUrl("/shitou-product/shitouproduct/spuinfo/updatePublishStatus"),
                    method: 'post',
                    data: this.$http.adornData({id: this.memberVo.id, spuId: spuId, publishStatus: 0 })
                }).then(({ data }) => {
                    if (data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '下架成功'
                        })
                        this.getAllProduct()
                    }
                })
            } else {
                this.$message({
                    type: 'success',
                    message: '商品已经售罄'
                })
            }
        },


        /**
         * 选中全部
         * @param {*} val 判断是否全选的依据
         */
        handleCheckAllChange(val) {
            this.checkedProduct = val ? productOptions : [];
            this.isIndeterminate = false;
        },


        /**
         * 选中单个时，判断是否已经全部选中
         * @param {*} value 当前chebox节点的值
         */
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.products.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.products.length;
        },


        /**
         * 获取当前登录用户发布的所有商品，除了已经删除的
         */
        getAllProduct() {
            this.$http({
                url: this.$http.adornUrl("/shitou-product/shitouproduct/spuinfo/getProductByMember"),
                method: 'post',
                data: this.$http.adornData(this.spuInfoVo)
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.productList = data.data
                    this.setCheckAllData()
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },


        /**
         * 设置全选中状态数据和修正数据
         */
        setCheckAllData() {
            this.productList.forEach((data) => {
                productOptions.push(data.spuId)
                // data.spuDetail = data.spuDetail.replaceAll("<br>", "\n");
            })
        },



        /**
         * // 判断是上架下架还是已售罄
         * @param {*} publishStatus 上下架状态
         * @param {*} sellStatus 是否已经售卖，true为已经，false为没有
         */
        checkProductStatus(publishStatus, sellStatus) {
            if (sellStatus) {
                return "已售罄"
            }
            if (publishStatus == 1) {
                return "上架中"
            }
            if (publishStatus == 0) {
                return "已下架"
            }
            return "未知"
        }




    },
    async created() {
        let member = await this.$memberInfo()
        if (member !== null) {
            this.memberVo = member;
            this.spuInfoVo.id = member.id;
            this.getAllProduct()
        }
    }
}
</script>
<style scoped>
@import url("../../utils/css/manageproduct.css");

* {
    padding: 0px;
    margin: 0px;
}
</style>
